<template>
    <div class="list" ref="wrapper">
      <div>
        <div class="item">
            <div class="city">当前城市</div>
             <ul class="btn-list">
               <li class="btn-wrapper">
                 <div class="btn">{{this.$store.state.city}}</div>
               </li>
             </ul>
         </div>
        <div class="item">
          <div class="city">热门城市</div>
          <ul class="btn-list">
            <li
              class="btn-wrapper"
              v-for="item in hotcity"
              :key="item.id"
              @click="handCityClick(item.name)"
            >
              <div class="btn">{{item.name}}</div>
            </li>
          </ul>
        </div>
        <div class="item"
             v-for="(item,key) in cities"
             :key="key"
             :ref="key"
        >
          <div class="city">{{key}}</div>
           <ul class="item-list" v-for="text in item" :key="text.id">
             <li class="item" @click="handCityClick(text.name)">{{text.name}}</li>
           </ul>
        </div>
      </div>
    </div>
</template>

<script>
// 引入scroll实现列滚动
import Bscroll from 'better-scroll'
export default {
  name: 'List',
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  props: {// 接受数据
    cities: Object,
    hotcity: Array,
    letter: String
  },
  methods: {
    handCityClick (city) {
      this.$store.dispatch('changeCity', city)
      // console.log(city)
      this.$router.push('/') // 编程式路由
    }
  },
  watch: {
    letter () { // 监听letter的变化
      if (this.letter) {
        const element = this.$refs[this.letter][0] // 找到对应的DOM
        this.scroll.scrollToElement(element) // 跳转
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .list{
    position:absolute;
    top:.87rem;
    left:0;
    bottom:0;
    right:0;
    overflow :hidden;
     .item{
       .city{
         background-color:#f5f5f5;
         padding-left :.1rem;
         height:.28rem;
         line-height .28rem;
         border-bottom :.01rem solid #cacaca;
       }
       .btn-list{
          overflow:hidden;
          box-sizing border-box;
         padding:.05rem .3rem .05rem .05rem;
          .btn-wrapper{
             width:33.3%;
             float:left;
            .btn{
              border:.01rem solid gray;
              text-align center;
              margin:.05rem;
              border-radius :.03rem;
              padding:.05rem 0;
            }
          }
       }
       .item-list{
          .item{
            padding-left :.1rem;
            border-bottom:.01rem solid #ccc;
            height:.36rem;
            line-height .36rem;
          }
       }
     }
  }
</style>
